<div class="pay">
  <nz-modal [(nzVisible)]="nzVisible"
    [nzContent]="feeTemplate"
    (nzOnCancel)="nzOnCancel()"
    (nzOnOk)="nzOnOk()"
  >
  </nz-modal>

  <nz-modal [(nzVisible)]="payModalVisible"
    [nzFooter]="null"
    [nzContent]="payTemplate"
    (nzOnCancel)="nzOnPayCancel()"
    [nzWidth]="350"
  >
  </nz-modal>
</div>

<!-- 输入缴费金额 -->
<ng-template #feeTemplate>
  <div class="pay-content">
    <div class="total" style="width: 300px;">
      <span style="width: 80px;">欠费金额</span>
      <span>{{ data?.total }}</span>
    </div>
    <div class="act-fee" style="width: 300px;margin: 8px 0;">
      <span style="width: 80px;">实缴金额</span>
      <span style="display: flex;align-items: center;">
        <nz-input-number-group nzPrefix="￥" style="width: 100%">
          <nz-input-number [nzStep]="1"
            style="font-weight: bold"
            (ngModelChange)="actFeeChange()"
            [(ngModel)]="actFee"
            nzPlaceHolder="实缴金额需大于等于应缴金额"
          ></nz-input-number>
        </nz-input-number-group>
        <span nz-icon nzType="question-circle" nzTheme="outline"
          style="margin-left: 8px;color: #f60;cursor: pointer;"
          nz-tooltip
          nzTooltipPlacement="bottom"
          nzTooltipTitle="实缴金额为实际支付金额，需大于等于欠费金额与余额总和"
        ></span>
      </span>
    </div>
    <div class="pay-type" style="width: 300px;">
      <span style="width: 80px;">缴费方式</span>
      <span style="margin-left: 12px;">
        <nz-radio-group [(ngModel)]="payType">
          <label nz-radio nzValue="weChatPay">微信支付</label>
          <label nz-radio nzValue="ALiPay">支付宝支付</label>
        </nz-radio-group>
      </span>
    </div>
  </div>
</ng-template>

<!-- 去缴费 -->
<ng-template #payTemplate>
  <div class="pay-content">
    <div class="total">
      <span style="width: 65px;">应缴金额</span>
      <span>￥{{ data?.total }}</span>
    </div>
    <div class="act-fee">
      <span style="width: 65px;">实缴金额</span>
      <span>
        ￥{{ actFee }}
      </span>
    </div>
    <div class="qr-code">
      <nz-spin [nzSpinning]="isSpinning">
        <div #payCodeImg class="pay-code-img" *ngIf="payCodeStatus !== 'paySuccess'">
          <p class="PingFangSC-Regular-14-65" *ngIf="payCodeStatus === 'error'">
            {{ payCodeText }},
            <a (click)="launchPay()">重新获取
              <!-- <i nz-icon nzType="sync" nzTheme="outline"></i>  -->
            </a>
          </p>
        </div>
        <!-- <p style="text-align: center;color: rgba(0, 0, 0, 0.3);">请使用使用微信扫码支付</p> -->
        <div style="margin-top: 12px;" *ngIf="payCodeStatus !== 'paySuccess'">
          <!-- <nz-radio-group [(ngModel)]="payType">
            <label nz-radio nzValue="weChatPay">微信支付</label>
            <label nz-radio nzValue="ALiPay">支付宝支付</label>
          </nz-radio-group> -->

          <nz-radio-group (ngModelChange)="payTypeChange($event)" [(ngModel)]="payType" style="display: flex;">
            <label nz-radio-button nzValue="weChatPay" style="display: flex;align-items: center;">
              <span style="display: flex;align-items: center;">
                <svg t="1702867110447" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10966" width="18" height="18"><path d="M404.511405 600.865957c-4.042059 2.043542-8.602935 3.223415-13.447267 3.223415-11.197016 0-20.934798-6.169513-26.045189-15.278985l-1.959631-4.296863-81.56569-178.973184c-0.880043-1.954515-1.430582-4.14746-1.430582-6.285147 0-8.251941 6.686283-14.944364 14.938224-14.944364 3.351328 0 6.441713 1.108241 8.94165 2.966565l96.242971 68.521606c7.037277 4.609994 15.433504 7.305383 24.464181 7.305383 5.40101 0 10.533914-1.00284 15.328104-2.75167l452.645171-201.459315C811.496653 163.274644 677.866167 100.777241 526.648117 100.777241c-247.448742 0-448.035176 167.158091-448.035176 373.361453 0 112.511493 60.353576 213.775828 154.808832 282.214547 7.582699 5.405103 12.537548 14.292518 12.537548 24.325012 0 3.312442-0.712221 6.358825-1.569752 9.515724-7.544837 28.15013-19.62599 73.202209-20.188808 75.314313-0.940418 3.529383-2.416026 7.220449-2.416026 10.917654 0 8.245801 6.692423 14.933107 14.944364 14.933107 3.251044 0 5.89015-1.202385 8.629541-2.7793l98.085946-56.621579c7.377014-4.266164 15.188934-6.89913 23.790846-6.89913 4.577249 0 9.003048 0.703011 13.174044 1.978051 45.75509 13.159718 95.123474 20.476357 146.239666 20.476357 247.438509 0 448.042339-167.162184 448.042339-373.372709 0-62.451354-18.502399-121.275087-51.033303-173.009356L407.778822 598.977957 404.511405 600.865957z" fill="#00C800" p-id="10967"></path></svg>
                <span style="margin-left: 8px;font-size: 12px;">微信支付</span>
              </span>
            </label>
            <label nz-radio-button nzValue="ALiPay">
              <span style="display: flex;align-items: center;">
                <svg t="1702867768671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2434" width="18" height="18"><path d="M514.816 93.7984c-232.0896 0-420.864 188.8256-420.864 420.864s188.8256 420.864 420.864 420.864c232.0896 0 420.864-188.8256 420.864-420.864s-188.7744-420.864-420.864-420.864z m0 800.768c-209.5104 0-379.904-170.4448-379.904-379.904s170.4448-379.904 379.904-379.904c209.5104 0 379.904 170.4448 379.904 379.904 0 46.1312-8.2944 90.368-23.3984 131.2768l-241.3568-80.5376c23.2448-42.3936 38.7584-85.5552 47.3088-131.7888l1.0752-5.8368h-126.976v-34.3552h152.576V353.792h-153.088V282.4192H467.2v68.0448H323.072v39.3216h141.5168v37.2224H351.3344v32.8704h235.5712c-0.1024 0.7168-0.256 1.4336-0.3584 2.2016l-0.3584 2.048c-3.2256 20.736-11.6224 40.3968-19.712 59.4432l-3.5328 8.2432c-2.6112 6.1952-4.352 10.3424-6.144 11.1616-2.1504 0.9728-7.8336-0.0512-16.2304-1.792-0.9728-0.2048-1.8944-0.5632-2.8672-0.8704-0.6144-0.2048-1.28-0.4608-1.8944-0.6656-9.0112-2.8672-18.0736-5.7344-27.0848-8.6016-20.0704-6.4-40.8576-13.0048-61.3888-19.2512-41.6768-12.6976-82.9952-12.1344-122.7264 1.6896-60.3136 20.992-87.296 78.0288-70.7584 133.2736 12.1856 40.7552 43.4176 65.792 88.0128 74.6496 52.8384 10.496 102.6048 4.8128 147.968-16.896 35.2256-16.8448 67.84-41.4208 97.0752-72.96 2.6112-2.816 3.2256-2.9184 6.7584-1.1776 22.528 11.1616 45.568 22.3232 67.84 33.024l158.72 76.9024c-69.1712 93.4912-180.3264 154.2656-305.408 154.2656z m12.6976-298.7008c-1.6384 1.8944-3.2256 3.6864-4.864 5.376-28.3648 28.4672-63.6928 59.0336-110.3872 69.7856-39.424 9.0624-72.6528 4.608-101.5808-13.6704-15.5136-9.7792-24.832-29.3888-23.7056-49.9712 1.0752-20.1728 12.032-36.8128 30.0032-45.6704 17.3056-8.4992 36.3008-12.7488 57.4976-12.7488 9.1136 0 18.5856 0.768 28.5696 2.304 38.656 6.0416 77.1072 19.8144 124.4672 44.5952z" fill="#00A0E9" p-id="2435"></path></svg>
                <span style="margin-left: 8px;font-size: 12px;">支付宝支付</span>
              </span>
            </label>
          </nz-radio-group>
        </div>
      </nz-spin>

      <div *ngIf="payCodeStatus === 'paySuccess'" class="pay-success">
        <img src="assets/images/pay/pay-success.svg" alt="">
        <p>支付成功 <a (click)="close()">关闭窗口</a></p>
      </div>
    </div>
  </div>
</ng-template>